<template>
    <div class="mui-content mui-scroll-wrapper">
        <header class="mui-bar mui-bar-nav bg-color">
            <!--返回按钮-->
                <span class="iconfont icon-fanhui header_fanhui" @tap="goHistory"></span> 
            <!--标题-->
            <h1 class="mui-title" >消息中心</h1>
            <span v-if="msgCenterList.length!=0" class="mui-pull-right Tit" @tap="compile">编辑</span>
        </header>
        <div class="mui-scroll">
             <!-- 热门资讯 -->
            <div class="msg-center">
                <ul v-for="v in msgCenterList">
                    <li>
                        <div class="msg-neir" @tap="goDetails(v)">
                            <div class="msg-top">
                                <span>{{formatTime(v)}}</span>
                            </div>
                            <div class="all-msg" >
                                <p class="tit">{{formatTitle(v)}}</p>
                                <p class="msg">您的订单{{formatMsg(v)}}!</p>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <!--空时显示-->
        <div class="empty ng-scope" v-if="msgCenterList.length === 0 ">
            <div class="empty-item">
                <div class="icon-zanwuxiaoxi" style="font-size:5rem;text-align:center;color:#999;">
                    <span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span><span class="path7"></span><span class="path8"></span><span class="path9"></span><span class="path10"></span><span class="path11"></span><span class="path12"></span><span class="path13"></span><span class="path14"></span><span class="path15"></span><span class="path16"></span><span class="path17"></span><span class="path18"></span><span class="path19"></span>
                </div>
                <div class="item-text">暂无消息</div>
            </div>
        </div>
    </div>
    
</template>

<script>
    import mui from 'static/js/mui.js'
    import storage from '@/utils/localstorage'
    import utils from '@/utils/utils'
    export default {
        components: {},
        data() {
            return{
                msgCenterList:[
                ]
            }
        },
        props: {},
        watch: {},
        methods: {
           goDetails(v){
               let a =  v[0].split('|')[2]
               let msg = ''
               switch (a) {
                    case '1':   
                        this.$router.push('/orderNavigate/biding')
                        break;
                    case '2':    
                        this.$router.push('/orderNavigate/biding')
                        break;
                    case '3':   
                        this.$router.push('/orderNavigate/crowdOrder')
                        break;
                    case '4':
                        this.$router.push('/orderNavigate/crowdOrder')
                        break;
                    case '5':  
                        this.$router.push('/orderNavigate/crowdOrder')
                        break;
                    case '6':   
                        this.$router.push('/orderNavigate/orders') 
                        break;
                    case '7':    
                        this.$router.push('/orderNavigate/orders')  
                        break;
                    case '8':   
                        this.$router.push('/orderNavigate/orders') 
                        break;
               }
               return msg 
           },
           formatTime(v){
               let a = utils.time.formatDatetwo( v[0].split('|')[3])
               return a
           },
           formatTitle(v){
               let a = v[0].split('|')[1]
               return a 
           },
           formatMsg(v){
               let a = v[0].split('|')[2]
               let msg = ''
               switch (a) {
                    case '1':   
                        msg = '进入询价'
                        break;
                    case '2':    
                        msg = '已支付询价金'
                        break;
                    case '3':   
                        msg = '	进入拼单' 
                        break;
                    case '4':
                        msg = '已支付拼单金'     
                        break;
                    case '5':  
                        msg = '已转入拼单'   
                        break;
                    case '6':   
                        msg = '已转入订单'  
                        break;
                    case '7':    
                        msg = '已付订金，等待联系' 
                        break;
                    case '8':   
                        msg = '订单失效'  
                        break;
               }
               return msg 
           },
           goHistory(){
               history.go(-1)
                /* this.$router.push({
                    path:"/min"
                }) */
            },
            compile(){
                this.$router.push({
                    path:"/msgCompile"
                })
            },
        },
        filters: {},
        computed: {},
        created() {
            if(storage.getLocalstorage('userAction')){
                this.msgCenterList = storage.getLocalstorage('userAction').reverse()
            }
        },
        mounted() {
            mui.init({
                keyEventBind: {
                backbutton: true  //关闭back按键监听
                }
            })
            mui.back = function () {
                history.go(-1)
            }
            //竖向滚动
            scroll = mui('.mui-scroll-wrapper').scroll({
                scrollY: true, //是否竖向滚动
                scrollX: false, //是否横向滚动
                startX: 0, //初始化时滚动至x
                startY: 0, //初始化时滚动至y
                indicators: true, //是否显示滚动条
                deceleration: 0.0006, //阻尼系数,系数越小滑动越灵敏
                bounce: false //是否启用回弹
            });
        },
        destroyed() { }
    }


</script>

<style lang="scss" scoped>
    .mui-bar-nav ~ .mui-content {
        padding-top: 0px;
    }
    .msg-center{
        margin-top:44px;
        margin-bottom:44px;
        .msg-neir{
            padding:0px 12px 0px 12px;
            border:1px solid #f5f5f5;
            .msg-top{
                 text-align:center;
                 margin:10px 0px 10px 0px;
                span{
                    background:#B8B8B8;
                    color:#fff;
                    padding:2px 5px 2px 5px;
                    font-size:0.5rem;
                }
            }
            .all-msg{
                background:#fff;padding:12px;
                border-radius:2px;
                .tit{
                    font-size:0.7rem;   
                    color:#333333;
                    border-bottom:1px solid #F8F8F8;
                    padding-bottom:10px; 
                }
                .msg{
                    font-size:0.65rem;
                    color:#999999;
                }
            }
        }
    }
    .Tit{
        line-height: 43px;
        font-size: 0.7rem;
        color:#666666;
    }
    .noMoreMsg{
        text-align:center;color:#AEAEAE;
        padding:15px;font-size:0.7rem;
    }
    .bg-color{
        -webkit-box-shadow: 0 0px 0px !important;
        box-shadow: 0 0px 0px !important;
    }
    .mui-bar {
        z-index:2;
        background-color: #fff;
        -webkit-box-shadow:none;
        box-shadow:none;
        border-bottom:1px solid #ddd;
    }
    .header_fanhui{
        line-height: 43px;
        font-size: 0.9rem;
        width: 43px;
    }

     /* 商品空时 */
    .empty {
        position: relative;
        display: block;
        width: 100%;
        position:absolute;
        top:43px;
        bottom:0px;
        overflow: hidden;
        background:#fff;
    }

    .empty .empty-item {
        position: absolute;
        left: 0;
        top: 35%;
        display: block;
        width: 100%;
    }

    .empty .empty-item .item-logo {
        display: block;
        margin: 0 auto;
        width: 80px;
        height: 80px;
    }

    .empty .empty-item .item-text {
        display: block;
        height: 32px;
        line-height: 32px;
        color: #aaaaaa;;
        font-size: 14px;
        font-weight: normal;
        overflow: hidden;
        text-align: center;
    }   
</style>